﻿
@{
    ViewBag.Title = "Users";
}

<br />

<form class="form-inline" style="margin-left:8px">
    <div class="form-group" style="margin-right:20px">
        <label class="control-label">User name / Name&nbsp;</label>
        <input name="Name" class="form-control" />
    </div>
    <div class="form-group" style="margin-right:20px">
        <label class="control-label">Gender&nbsp;</label>
        <select data-name="genders" data-empty-html="&nbsp;All" name="Gender" class="form-control">
            <option value="{{Id}}">&nbsp;{{Name}}&nbsp;&nbsp;</option>
        </select>
    </div>
    <div class="form-group">
        <label class="control-label">Tel / Mobile / Email&nbsp;</label>
        <input name="Contact" class="form-control" />
    </div>
    <div class="form-group">
        <button type="button" class="btn btn-info"
                data-plugin="filterer"
                data-value-elements="Name,Gender,Contact">
            Query
        </button>
    </div>
</form>

<br />

<input name="header" id="header" type="hidden" value="0" />
<input name="updown" id="updown" type="hidden" value="1" />
<table class="table table-bordered table-condensed table-striped">
    <thead data-plugin="tableHeadSorter" data-header-element="header" data-updown-element="updown">
        <tr>
            <th class="sort-both" data-header="1">User name</th>
            <th class="sort-both" data-header="2">Name</th>
            <th class="sort-both" data-header="3">Gender</th>
            <th class="sort-both" data-header="4">Tel</th>
            <th class="sort-both" data-header="5">Mobile</th>
            <th class="sort-both" data-header="6">Email</th>
            <th>
                <a href="/Admin/Users/Create">
                    <i class="glyphicon glyphicon-new-window"></i>&nbsp;Create
                </a>
                <a href="/Admin/Users/SetInitialPassword" class="pull-right">
                    Set initial password
                </a>
            </th>
        </tr>
    </thead>
    <tbody data-plugin="renderer" class="invisible">
        <tr>
            <td>{{UserName}}</td>
            <td>{{Name}}</td>
            <td>{{GenderName}}</td>
            <td>{{Tel}}</td>
            <td>{{Mobile}}</td>
            <td>{{Email}}</td>
            <td>
                <a href="/Admin/Users/{{IsDisabled=='true'?'Enable':'Disable'}}/{{Id}}{{window.location.search}}">
                    {{IsDisabled=='true'?'Enable':'Disable'}}
                </a>
                <span>&nbsp;</span>
                <a href="/Admin/Users/Unlock/{{Id}}{{window.location.search}}" class="{{IsLockedOut=='true'?'':'btn disabled'}}">
                    Unlock
                </a>
                <span>&nbsp;</span>
                <a href="/Admin/Users/GrantRoles/{{Id}}{{window.location.search}}">
                    Roles
                </a>
                <span>&nbsp;</span>
                <a href="/Admin/Users/SetPassword/{{Id}}{{window.location.search}}">
                    Password
                </a>
                <span>&nbsp;</span>
                <a href="/Admin/Users/SetUserName/{{Id}}{{window.location.search}}">
                    User-name
                </a>
                <span>&nbsp;</span>
                <a href="/Admin/Users/Delete/{{Id}}{{window.location.search}}">
                    <i class="glyphicon glyphicon-remove"></i>&nbsp;Delete
                </a>
                <span>&nbsp;</span>
                <a href="/Admin/Users/Details/{{Id}}">
                    <i class="glyphicon glyphicon-list-alt"></i>&nbsp;Details
                </a>
            </td>
        </tr>
    </tbody>
</table>
<hr style="margin-top: 0px; padding-top: 0px; border-top: 2px solid #dddddd" />

<span data-plugin="paginationInfo" style="margin-right: 32px; margin-top: 8px; float: left" data-html="{{itemCount}} results"></span>

<ul data-plugin="pagination" style="display: inline" class="pagination"></ul>

<label style="margin-left: 16px">To</label>
<input id="paginationGoValue" class="form-control input-sm" type="number" min="1" max="50" style="padding: 0px; padding-left: 4px; height: 28px; width: 42px; display: inline" />
<button data-plugin="paginationGo" style="margin-bottom: 0px" class="btn btn-info btn-sm" type="button"
        data-value-element="paginationGoValue">
    Go
</button>

<div class="pull-right">
    <label>Size</label>
    <select data-plugin="pageSizer" name="pageSize" class="form-control input-sm" style="padding-left: 10px; padding-right: 2px; width: 60px; display: inline-block">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
        <option value="50">50</option>
    </select>
</div>

@section scripts
{
    <script>
        $(document).ready(function () {
            $('select[data-name]').initializer();

            $('body').queryPage();
        });
    </script>
}
